<template>
  <div class="page-container">
    <!-- 背景组件 -->
    <code-rain class="code-rain-background"></code-rain>
    <!-- 菜单内容 -->
    <menu-layout class="menu-layout"></menu-layout>
    <div class="content">

    </div>
  </div>
</template>



<script setup lang="ts">
import MenuLayout from '@/components/MenuLayout.vue'
import codeRain from '@/components/codeRain.vue'
</script>

<style scoped>
/* 页面容器 */
.page-container {
  display: flex;
  position: relative; /* 确保子元素的定位基于此容器 */
  width: 100%; /* 覆盖整个页面宽度 */
  height: 100vh; /* 覆盖整个页面高度 */
}

/* 背景组件样式 */
.code-rain-background {
  position: fixed; /* 固定定位 */
  top: 0;
  left: 0;
  width: 100%; /* 覆盖整个页面宽度 */
  height: 100%; /* 覆盖整个页面高度 */
  z-index: -1; /* 确保在其他内容下方 */
}

/* 菜单组件样式 */
.menu-layout {
  position: fixed; /* 绝对定位 */
  top: 0; /* 固定在页面顶部 */
  left: 0;
  width: 100%; /* 宽度覆盖整个页面 */
  z-index: 1; /* 确保在 codeRain 上方 */
  color: #fff; /* 可选：设置文字颜色 */
  margin: 0;
}
.content{
  position: relative;
  width: 80vw;
  height: 500px;
  display: flex;
  background-color: white;
  z-index: 2;
  top: 100px;
  left: 0;
}
.card{
  height: 300px;

  z-index: inherit;
}
.backgroundElement{
  z-index: 1;
}
</style>
